<template>
    <div>
        <h1>hahaha</h1>
        <!-- 0、e.target -->
        <!-- 1、base64传输 -->
        <!-- <el-form label-width="100px">
            <el-form-item
                width="200"
                align="center"
                label="选择文件"
                prop="path"
            >
                <input
                    type="file"
                    class="face"
                    accept="image/*"
                    ref="inputer"
                />
            </el-form-item>

            <el-form-item label="备注" prop="remarks">
                <el-input placeholder="请输入备注" v-model="input"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary">提交</el-button>
            </el-form-item>
        </el-form>
        <button @click="test">按钮</button> -->
        <!-- 2、formData传输 -->
        <el-form id="myform" label-width="100px">
            <el-form-item label="参数1">
                <el-input type="text" name="p1" v-model="input"> </el-input>
            </el-form-item>
            <el-form-item label="文件1">
                <input type="file" name="file" @change="getFile($event)" />
                <!-- <input type="file" name="f1" @change="getFlie($event)">
                </input> -->
            </el-form-item>
            <el-button @click="test1($event)">
                提交
            </el-button>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            input: "晚上好",
            file: "",
        };
    },
    methods: {
        // test
        // test() {
        //     // console.log(this.$refs.inputer);
        //     let image = this.$refs.inputer.files[0]
        //     let reader = new FileReader();
        //     reader.readAsDataURL(image)
        //     reader.onload = function (ev) {
        //         let dataURL = ev.target.result
        //         console.log(dataURL);
        //     }
        //     // console.log(image);
        // },

        //test1
        getFile(e) {
            this.file = e.target.files[0];
            console.log(this.file);
        },
        test1(e) {
            e.preventDefault();
            let formData = new FormData();

            formData.append("p1", this.input);

            formData.append("file", this.file);

            // console.log(formData.get("p1"));

            // console.log(formData.get("file"));

            //接口
            this.$axios.post('http://47.112.119.212:8081/ceshi',formData,{headers:{
                'Content-Type' : 'multipart/form-data'
            }}).then(function(){
                console.log("成功");
            }).catch(function(){
                console.log("ERROR");
            })
            //接口1
            // this.$axios({
            //     method: "post",
            //     url: "http://47.112.119.212:8081/ceshi",
            //     data: formData,
            // }).then((res) => {
            //     console.log(res);
            //     if (res.data.code == 0) {
            //         this.$message.success("提交成功!");
            //     }
            // });
            // console.log(11);
        },
        // 接口2
    },
};
</script>
<style lang=""></style>
